<template>
  <div>
    <van-cell-group v-if="type == 'kxChargingScheme'" class="mt15" inset>
      <van-form>
        <van-field required v-model="kxChargingScheme.schemeName" disabled label="充电方案名称" placeholder="请输入方案名称" />
        <van-field type="number" :value="chargingTypes[kxChargingScheme.type]" disabled label="计费类型" ></van-field>
        <van-field type="number" v-model="kxChargingScheme.maxChargingTime" disabled label="最大充电时长" placeholder="请输入最大充电时长">
          <span slot="button">小时</span>
        </van-field>
        <van-field type="number" v-model="kxChargingScheme.eleCost" disabled label="电价成本" placeholder="请输入电价成本">
          <span slot="button">元</span>
        </van-field>
        <van-field type="number" v-model="kxChargingScheme.startPrice" disabled label="起充价格" placeholder="请输入起充价格">
          <span slot="button">元</span>
        </van-field>
        <van-field type="number" v-model="kxChargingScheme.degreePrice" disabled label="按度计费价格" placeholder="请输入按度计费价格">
          <span slot="button">度 / 元</span>
        </van-field>
        <van-field v-if="kxChargingScheme.type ===1" label="是否最大功率">
          <van-switch v-model="kxChargingScheme.isMaxPower" disabled :active-value="1" :inactive-value="0" size="20px" slot="input" />
        </van-field>
        <van-field label="是否允许欠费">
          <van-switch v-model="kxChargingScheme.isPayLater" disabled :active-value="1" :inactive-value="0" size="20px" slot="input" />
        </van-field>
        <ul class="detail" v-if="kxChargingScheme.type === 1">
          <li>
            <div class="label">功率区间</div>
            <div class="label">单价</div>
            <div class="index">排序</div>
          </li>
          <li
            v-for="(item, i) in kxChargingScheme.schemeDetailed"
            :key="i"
          >
            <div class="label">{{item.min_power}} - {{item.max_power}} 瓦</div>
            <div class="label">{{item.ele_price}} 元 / 小时</div>
            <div class="index">{{item.index}}</div>
          </li>
        </ul>
        <ul class="detail"  v-if="kxChargingScheme.type === 3">
          <li>
            <div class="label">充电时间</div>
            <div class="label">充电单价</div>
            <div class="index">排序</div>
          </li>
          <li
            v-for="(item, i) in kxChargingScheme.schemeDetailed.detailed"
            :key="i"
          >
            <div class="label">{{item.start_time}} - {{item.end_time}}</div>
            <div class="label">{{item.ele_price}} 元 / 度</div>
            <div class="index">{{item.index}}</div>
          </li>
        </ul>
      </van-form>
    </van-cell-group>
    <van-cell-group v-if="type == 'kxEquipScheme'" class="mt15" inset>
      <van-form>
        <van-field required v-model="kxEquipScheme.schemeName" disabled label="设备方案名称" placeholder="请输入方案名称" />
        <van-field label="是否共享充电">
          <van-switch v-model="kxEquipScheme.isShare" :active-value="1" :inactive-value="0" disabled size="20px" slot="input" />
        </van-field>
<!--        <van-field label="是否地图可见">-->
<!--          <van-switch v-model="kxEquipScheme.isVisible" :active-value="1" :inactive-value="0" disabled size="20px" slot="input" />-->
<!--        </van-field>-->
        <!--        <van-field label="是否充满自停">-->
        <!--          <van-switch v-model="formData.isAutoStop" :active-value="1" :inactive-value="0" size="20px" slot="input" />-->
        <!--        </van-field>-->
        <!--        <van-field label="是否临时充电">-->
        <!--          <van-switch v-model="formData.isTemporary" :active-value="1" :inactive-value="0" size="20px" slot="input" />-->
        <!--        </van-field>-->
        <van-field label="是否显示功率">
          <van-switch v-model="kxEquipScheme.isShowPower" :active-value="1" :inactive-value="0" disabled size="20px" slot="input" />
        </van-field>
        <van-field label="是否显示计费方案">
          <van-switch v-model="kxEquipScheme.isShowScheme" :active-value="1" :inactive-value="0" disabled size="20px" slot="input" />
        </van-field>
        <van-field required type="digit" v-model="kxEquipScheme.singleMaxPower" disabled label="单路最大功率" placeholder="请输入单路最大功率">
          <span slot="button">瓦</span>
        </van-field>
        <van-field required type="digit" v-model="kxEquipScheme.totalMaxPower" disabled label="总功率" placeholder="请输入总功率">
          <span slot="button">瓦</span>
        </van-field>
      </van-form>
    </van-cell-group>
    <van-cell-group v-if="type == 'kxRechargeScheme'" class="mt15" inset>
      <van-form>
        <van-field required v-model="kxRechargeScheme.rechargeName" disabled label="充值方案名称" placeholder="请输入方案名称" />
        <van-field label="允许自定义金额">
          <van-switch v-model="kxRechargeScheme.isFreePrice" :active-value="1" :inactive-value="0" disabled size="20px" slot="input" />
        </van-field>
        <van-field label="启用充值赠送">
          <van-switch v-model="kxRechargeScheme.isGive" :active-value="1" :inactive-value="0" disabled size="20px" slot="input" />
        </van-field>
        <van-field type="number" v-if="false" v-model="kxRechargeScheme.deposit" disabled label="账户押金" placeholder="请输入账户押金">
          <span slot="button">元</span>
        </van-field>
        <van-field type="number" v-model="kxRechargeScheme.registerGive" disabled label="注册赠送" placeholder="请输入注册赠送">
          <span slot="button">元</span>
        </van-field>
        <ul class="detail">
          <li>
            <div class="label">充值金额</div>
            <div class="label">赠送金额</div>
            <div class="index">排序</div>
          </li>
          <li
            v-for="(item, i) in kxRechargeScheme.schemeDetailed"
            :key="i"
          >
            <div class="label">{{item.recharge_price}} 元</div>
            <div class="label">{{item.give_price}} 元</div>
            <div class="index">{{item.index}}</div>
          </li>
        </ul>
      </van-form>
    </van-cell-group>
    <van-cell-group v-if="type == 'kxSplittingScheme'" class="mt15" inset>
      <van-form >
        <van-field required v-model="kxSplittingScheme.splittingName" disabled label="充值方案名称" placeholder="请输入方案名称" />
        <Select title="分账类型" disabled placeholder="请选择分账类型" v-model="kxSplittingScheme.type" :option="typeOption"></Select>
        <ul class="detail">
          <li>
            <div class="label">帐户</div>
            <div class="label">分账比例</div>
            <div class="index">排序</div>
          </li>
          <li
            v-for="(item, i) in kxSplittingScheme.schemeDetailed"
            :key="i"
          >
            <div class="label">{{item.name}}</div>
            <div class="label">{{item.splitting_ratio}}</div>
            <div class="index">{{item.index}}</div>
          </li>
        </ul>
      </van-form>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'ShowDetailed',
  props: ['id', 'type'],
  data () {
    return {
      typeOption: [
        { text: '充值分账', value: 1 },
        { text: '充电分账', value: 2 }
      ],
      chargingTypes: {
        1: '请求功率',
        3: '上报度数'
      },
      kxChargingScheme: {},
      kxEquipScheme: {},
      kxRechargeScheme: {},
      kxSplittingScheme: {}
    }
  },
  methods: {
    showActions () {
      const listQuery = { id: this.id, type: this.type }
      this.$http.get('/restful/kxArea/getDetailedScheme', { params: listQuery }).then(response => {
        if (this.type === 'kxChargingScheme') {
          this.kxChargingScheme = response.data
          // eslint-disable-next-line no-eval
          this.kxChargingScheme.schemeDetailed = JSON.parse(this.kxChargingScheme.schemeDetailed)
        }
        if (this.type === 'kxEquipScheme') {
          this.kxEquipScheme = response.data
        }
        if (this.type === 'kxRechargeScheme') {
          this.kxRechargeScheme = response.data
          // eslint-disable-next-line no-eval
          this.kxRechargeScheme.schemeDetailed = eval(this.kxRechargeScheme.schemeDetailed)
        }
        if (this.type === 'kxSplittingScheme') {
          this.kxSplittingScheme = response.data
          // eslint-disable-next-line no-eval
          this.kxSplittingScheme.schemeDetailed = eval(this.kxSplittingScheme.schemeDetailed)
        }
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped lang='less'>
  .detail {
    margin: 15px;
    border: solid 1px #f0f0f0; border-radius: 5px;
    padding: 0px 10px;
    li {
      display: flex; align-items: center; flex-wrap: wrap;
      border-bottom: solid 1px #f5f5f5;
      padding: 7px 0;
      line-height: 20px;
      &:last-child {
        border: none
      }
      &.add {
        padding: 10px 0;
      }
      .label {
        width: 35%;
        font-size: 13px;
      }
      .index {
        width: 15%;
      }
      .btn {
        width: 15%;
      }
    }
  }
  .mini {
    width: 100%;
    ::v-deep {
      .van-button__text {
        font-size: 12px;
      }
    }
  }
</style>
